<template>
  <div class="persen">
    <el-row :gutter="24">
      <el-col :span="11" :push="2">
        <div :v-model="news">
          <div
            class="d1"
            style="line-height: 100px;margin-left: 150px; margin-top: 10px;"
          >
            <el-upload
              class="avatar-uploader"
              :http-request="setHeadImg"
              :show-file-list="false"
              action="10.1.188.69:8081/lr/upload"
              :on-success="handleAvatarSuccess"
            >
              <el-image :src="news.url" class="avatar" fit="cover"></el-image>
            </el-upload>
          </div>
          <div class="d1">
            <span class="c1">昵称：</span>
            <span v-if="span"
              >{{ news.nickname }}
              <img
                v-if="au"
                class="au"
                src="../../../assets/image/profile/au.png"
                title="已认证"
                @click="auform = true"
              />
              <img
                v-else
                class="au"
                src="../../../assets/image/profile/nau.png"
                title="未认证,点击认证"
                @click="auform = true"
              />
            </span>
            <input
              v-else
              id="nick"
              type="text"
              :value="news.nickname"
              @change="nickname"
            />
            <span id="nick1" class="span1" v-if="!span"></span>
            <el-dialog
              title="个人认证"
              :visible.sync="auform"
              style="margin-top: -80px;"
            >
              <el-form
                :model="Form"
                :rules="rule"
                ref="Form"
                label-width="100px"
                class="demo-Form"
              >
                <el-form-item label="真实姓名" prop="name">
                  <el-input
                    v-model="Form.name"
                    placeholder="请输入真实姓名"
                    style="width: 190px;"
                  ></el-input>
                </el-form-item>
                <el-form-item label="证件类型" prop="type">
                  <el-select
                    default-first-option=""
                    v-model="Form.type.value"
                    placeholder="请选择证件类型"
                  >
                    <el-option
                      v-for="item in Form.type"
                      :key="item.id"
                      :label="item.value"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="证件号码" prop="number">
                  <el-input
                    v-model="Form.number"
                    placeholder="请输入证件号码"
                    style="width: 190px;"
                  ></el-input>
                </el-form-item>
                <el-form-item label="证件照片" required>
                  <div class="el" style="display: flex;">
                    <el-upload
                      v-model="Form.img1"
                      class="uploader"
                      :show-file-list="false"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-success="handleAvatarSuccess1"
                    >
                      <img v-if="Form.img1" :src="Form.img1" class="avatar" />
                      <i v-else class="el-icon-upload2 uploader-icon"
                        ><p
                          style="font-size: 18px;line-height: 18px;margin-top: -50px;"
                        >
                          上传本人手持证件照片(正面)<br />支持jpg、png等格式图片，大小不超过5M
                        </p></i
                      >
                    </el-upload>
                    <el-upload
                      v-model="Form.img2"
                      class="uploader"
                      :show-file-list="false"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-success="handleAvatarSuccess2"
                    >
                      <img v-if="Form.img2" :src="Form.img2" class="avatar" />
                      <i v-else class="el-icon-upload2 uploader-icon"
                        ><p
                          style="font-size: 18px;line-height: 18px;margin-top: -50px;"
                        >
                          上传本人手持证件照片(反面)<br />支持jpg、png等格式图片，大小不超过5M
                        </p></i
                      >
                    </el-upload>
                  </div>
                </el-form-item>
                <el-form-item label="证件有效期" required>
                  <el-col :span="8">
                    <el-form-item prop="date1">
                      <el-date-picker
                        type="date"
                        placeholder="开始日期"
                        v-model="Form.date1"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="1">-</el-col>
                  <el-col :span="8">
                    <el-form-item prop="date2">
                      <el-date-picker
                        type="date"
                        placeholder="截止日期"
                        v-model="Form.date2"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-checkbox v-model="Form.checked">长期有效</el-checkbox>
                  </el-col>
                </el-form-item>
                <el-form-item label="联系地址" prop="address">
                  <el-input
                    v-model="Form.address"
                    placeholder="请输入联系地址"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="setInsertPAI('Form')"
                    >提交</el-button
                  >
                  <el-button @click="reset('Form')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
          <div class="d1">
            <span class="c1">平台账号：</span>
            <span>{{ news.username }}</span>
          </div>
          <div class="d1">
            <span class="c1">积分：</span>
            <span>{{ news.point }}</span>
            <a href="#" @click="pointForm = true" style="margin-left: 10px;"
              >详情</a
            >
            <el-dialog title="积分详情" :visible.sync="pointForm">
              <el-table :data="tableData">
                <el-table-column prop="time" label="日期" width="250">
                </el-table-column>
                <el-table-column prop="details" label="活动详情" width="300">
                </el-table-column>
                <el-table-column prop="point" label="积分"> </el-table-column>
              </el-table>
            </el-dialog>
          </div>
          <div class="d1">
            <span class="c1">性别：</span>
            <span v-if="span">{{ news.gender == "1" ? "男" : "女" }}</span>
            <span v-else>
              <el-radio name="news.gender" v-model="news.gender" label="1"
                >男</el-radio
              >
              <el-radio name="news.gender" v-model="news.gender" label="2"
                >女</el-radio
              >
            </span>
          </div>
          <div class="d1">
            <span class="c1">邮箱：</span>
            <span v-if="span">{{ news.email }}</span>
            <input
              v-else
              type="email"
              :value="news.email"
              id="email"
              @change="email"
            />
            <span id="email1" class="span1" v-if="!span"></span>
          </div>
          <div class="d1">
            <span class="c1">手机号：</span>
            <span v-if="span">{{ news.mobile }}</span>
            <input
              v-else
              type="phone"
              :value="news.mobile"
              id="phone"
              @change="phone"
            />
            <span id="phone1" class="span1" v-if="!span"></span>
          </div>
          <div class="d1" v-if="!span">
            <el-button
              class="btn"
              label="btt"
              @click="dialogFormVisible = true"
              type="primary"
              style="margin-left: 100px;margin-top: 10px;"
            >
              点击修改密码
            </el-button>
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="原始密码" prop="oldPass">
                  <el-input
                    :type="type"
                    v-model="ruleForm.oldPass"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                  <el-input
                    :type="type"
                    v-model="ruleForm.pass"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                  <el-input
                    :type="type"
                    v-model="ruleForm.checkPass"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="btn" type="primary" @click="submitForm"
                    >确认</el-button
                  >
                  <el-button class="btn" @click="resetForm">显示密码</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
          <div class="d2">
            <el-button
              v-if="span"
              type="primary"
              round
              @click="changespan1"
              class="btn"
              >点击修改个人信息</el-button
            >
            <el-button
              class="btn"
              v-else
              type="danger"
              round
              @click="changeInfomation"
              >保存</el-button
            >
            <el-button
              class="btn"
              v-if="!span"
              type="success"
              round
              @click="changespan3"
              >取消</el-button
            >
          </div>
        </div>
      </el-col>
      <el-col :span="10" :push="1">
        <h2 style="margin-bottom: 20px;text-align: left; margin-top: 10px;">
          勋章墙
        </h2>
        <hr />
        <div class="medal" :v-model="news">
          <div class="medal1">
            <img
              v-if="news.achievement1"
              src="../../../assets/image/profile/medal1-1.png"
              title="捐赠次数达到30次"
            />
            <img
              v-else
              src="../../../assets/image/profile/medal1-2.png"
              title="捐赠次数达到30次"
            />
            <h5>公益劳模</h5>
          </div>
          <div class="medal1">
            <img
              v-if="news.achievement2"
              src="../../../assets/image/profile/medal2-1.png"
              title="捐款总值达到100元"
            />
            <img
              v-else
              src="../../../assets/image/profile/medal2-2.png"
              title="捐款总值达到100元"
            />
            <h5>公益之心</h5>
          </div>
          <div class="medal1">
            <img
              v-if="news.achievement3"
              src="../../../assets/image/profile/medal3-1.png"
              title="梦想成真"
            />
            <img
              v-else
              src="../../../assets/image/profile/medal3-2.png"
              title="梦想成真"
            />
            <h5>梦想成真</h5>
          </div>
          <div class="medal1">
            <img
              v-if="news.achievement4"
              src="../../../assets/image/profile/medal4-1.png"
              title="购买义卖品达到300元"
            />
            <img
              v-else
              src="../../../assets/image/profile/medal4-2.png"
              title="购买义卖品达到300元"
            />
            <h5>腰缠万贯</h5>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getMyInfo,
  getPoint,
  getModifyInfo,
  getModpassword,
  getPassword,
  setHeadImg,
  setInsertPAI,
  getPv
} from "@/network/profile.js";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9]{6,12}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (reg.test(this.ruleForm.pass) == false) {
        callback(new Error("密码为6-12位的数字、字母组合"));
      } else if (this.ruleForm.pass == this.ruleForm.oldPass) {
        callback(new Error("新密码不能和原始密码一样"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass1 = async (rule, value, callback) => {
      await this.getPassword(this.ruleForm.oldPass);
      if (value === "") {
        callback(new Error("请输入原始密码"));
      } else if (!this.pwdTrue) {
        callback(new Error("密码与当前密码不一致"));
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      au: "",
      news: {
        url:
          "https://img2.baidu.com/it/u=325567737,3478266281&fm=26&fmt=auto&gp=0.jpg"
        // nickname: "啦啦啦啦",
        // username: "skjs",
        // point: "10",
        // gender: 0,
        // email: "123@34.com",
        // mobile: "4521452",
        // password: "123456",
        // achievement1: false,
        // achievement2: true,
        // achievement3: true,
        // achievement4: true
      },
      type: "password",
      drawer: false,
      span: true,
      pwdTrue: false,
      nickTrue: false,
      phoneTrue: false,
      emailTrue: false,
      ruleForm: {
        oldPass: "",
        pass: "",
        checkPass: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass: [{ validator: validatePass1, trigger: "blur" }]
      },
      dialogFormVisible: false,
      pointForm: false,
      tableData: [
        // {
        //   time: "2016-05-02",
        //   details: "发布众筹事件",
        //   point: "10"
        // }
      ],
      auform: false,
      Form: {
        username: "",
        name: "",
        type: [
          { id: "01", value: "居民身份证(中国大陆)" },
          { id: "02", value: "士兵证" },
          { id: "03", value: "军官证" },
          { id: "04", value: "警官证" },
          { id: "05", value: "护照" },
          { id: "06", value: "其他" }
        ],
        id_type: "",
        number: "",
        dialogImageUrl: "",
        dialogVisible: false,
        photo: {},
        img1: "",
        img2: "",
        validity: "",
        date1: "",
        date2: "",
        email: "",
        checked: false,
        address: ""
      },
      rule: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请选择证件类型",
            trigger: "change"
          }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        number: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          { min: 18, max: 18, message: "长度为18个字符", trigger: "blur" }
        ],
        img1: [{ required: true, message: "请上传证件照", trigger: "blur" }],
        img2: [{ required: true, message: "请上传证件照", trigger: "blur" }],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getMyInfo();
    this.news.gender = "" + this.news.gender;
    this.getPoint();
    if (this.$store.state.personalAu) this.auform = true;
  },
  destroyed() {
    this.$store.state.personalAu = false;
  },
  mounted() {},
  methods: {
    setInsertPAI(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "提交成功，请等待审核! ",
            type: "success"
          });
          this.auform = false;
          this.$store.state.personalAu = false;
          this.Form.username = this.news.username;
          this.Form.email = this.news.email;
          this.Form.photo = `{${this.Form.img1},${this.Form.img2}}`;
          this.Form.id_type = `${this.Form.type.value}`;
          this.Form.date1 = this.formatDate(this.Form.date1);
          this.Form.date2 = this.formatDate(this.Form.date2);
          this.Form.validity = `${this.Form.date1}-${this.Form.date2}`;
          // console.log("认证");
          // console.log(this.Form);
          setInsertPAI(this.Form).then(res => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    formatDate(date) {
      let formatDate;
      formatDate = new Date(date);
      formatDate =
        formatDate.getFullYear() +
        "." +
        (formatDate.getMonth() + 1 > 9
          ? formatDate.getMonth() + 1
          : "0" + (formatDate.getMonth() + 1)) +
        "." +
        (formatDate.getDate() > 9
          ? formatDate.getDate()
          : "0" + formatDate.getDate());
      return formatDate;
    },

    setHeadImg(data) {
      let formData = new FormData();
      formData.append("file", data.file, data.file.name);
      setHeadImg(formData).then(res => {
        if (res.data) {
          this.news.url = res.data.url;
          this.$store.commit("setAvatarUrl", res.data.url);
        } else {
          // if (res) {
          //   this.news.url = res;
          //   this.$store.commit("setAvatarUrl", res);
          // } else {
          this.$message({
            showClose: true,
            message: "头像上传失败！ ",
            type: "warning"
          });
        }
        console.log("headimg");
        console.log(res);
        // location.reload();
      });
    },
    getMyInfo() {
      getMyInfo().then(res => {
        // console.log("myinfo");
        // console.log(res.data.infoVo);
        res.data.infoVo.gender = "" + res.data.infoVo.gender;
        this.news = res.data.infoVo;
        console.log(res.data.infoVo.username);
        getPv(res.data.infoVo.username).then(res => {
          // console.log("是否认证");
          // console.log(res);
          if (res == "通过") {
            this.au = true;
          }
        });
      });
    },
    getPoint() {
      getPoint().then(res => {
        // console.log("point");
        // console.log(res.data.data);
        this.tableData = res.data.data;
      });
    },
    getModifyInfo() {
      getModifyInfo(
        this.news.nickname,
        this.news.gender,
        this.news.email,
        this.news.mobile
      ).then(res => {
        if (res.code == "20000") {
          this.$store.commit("setNickName", this.news.nickname);
        }
        // console.log("modifyinfo");
        // console.log(res);
      });
    },
    async getPassword(p) {
      let res = await getPassword(p);
      // console.log("pwd");
      // console.log(res.success);
      this.pwdTrue = res.success;
    },
    getModpassword(p) {
      getModpassword(p).then(res => {
        // console.log("modpwd");
        // console.log(res.success);
      });
    },

    submitForm() {
      if (
        !this.ruleForm.pass ||
        !this.ruleForm.checkPass ||
        !this.ruleForm.oldPass
      ) {
        this.$message({
          showClose: true,
          message: "请输入密码 ",
          type: "warning"
        });
      } else {
        this.getModpassword(this.ruleForm.pass);
        this.dialogFormVisible = false;
      }
    },
    resetForm() {
      this.type = "text";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleAvatarSuccess(res, file) {
      this.news.url = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess1(res, file) {
      this.Form.img1 = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess2(res, file) {
      this.Form.img2 = URL.createObjectURL(file.raw);
    },
    changespan1() {
      this.span = false;
    },
    changespan3() {
      this.span = true;
    },
    changeInfomation() {
      let nick = document.getElementById("nick");
      let email = document.getElementById("email");
      let phone = document.getElementById("phone");
      this.nickname();
      this.phone();
      this.email();
      if (this.nickTrue && this.phoneTrue && this.emailTrue) {
        this.news.nickname = nick.value;
        this.news.email = email.value;
        this.news.mobile = phone.value;
        this.span = true;
        this.getModifyInfo();
      } else {
        this.$message({
          showClose: true,
          message: "请重新输入!",
          type: "warning"
        });
      }
    },
    nickname() {
      let reg = /^.{3,12}$/;
      let nick = document.getElementById("nick");
      let nick1 = document.getElementById("nick1");
      if (reg.test(nick.value) || nick.value == "") {
        nick1.style.display = "none";
        this.nickTrue = true;
      } else if (nick1.value != "") {
        nick1.style.marginLeft = "13vw";
        nick1.style.display = "";
        console.log("昵称长度为3-12个字符");
        nick1.innerHTML = "昵称长度为3-12个字符";
        this.nickTrue = false;
      }
    },
    phone() {
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      let phone = document.getElementById("phone");
      let phone1 = document.getElementById("phone1");
      if (reg.test(phone.value) || phone.value == "") {
        console.log("手机号格式正确(长度为11个数字)");
        phone1.style.display = "none";
        this.phoneTrue = true;
        phone1.innerHTML = "手机号格式正确";
      } else if (phone1.value != "" || !reg.test(phone.value)) {
        phone1.style.display = "";
        phone1.style.marginLeft = "13vw";
        console.log("手机号格式不正确(长度为11个数字)");
        phone1.innerHTML = "手机号格式不正确(长度为11个数字)";
        this.phoneTrue = false;
      }
    },
    email() {
      let reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      let email = document.getElementById("email");
      let email1 = document.getElementById("email1");
      if (reg.test(email.value) || email.value == "") {
        email1.style.display = "none";
        this.emailTrue = true;
      } else if (email1.value != "") {
        email1.style.display = "";
        email1.style.marginLeft = "13vw";
        console.log("邮箱格式不正确");
        email1.innerHTML = "邮箱格式不正确";
        this.emailTrue = false;
      }
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$message({
            showClose: true,
            message: "submit!",
            type: "warning"
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped>
.persen {
  margin-left: 11vw;
  min-width: 800px;
  overflow: hidden;
  /* max-width: 80vw; */
  /* height: 91vh; */
}
.au {
  width: 30px;
  cursor: pointer;
}
.c1 {
  display: inline-block;
  width: 150px;
  text-align: right;
  margin-right: 40px;
}
.d1 {
  margin-bottom: 20px;
  font-size: 2.4vh;
}
.btn {
  font-size: 2.4vh;
}
.d1 span {
  display: inline-block;
}
.d1 .span1 {
  /* margin-left: 13vw; */
  color: red;
  display: inline-block;
}
.d1 a {
  text-decoration: underline;
  color: rgb(64, 150, 184);
  font-size: 2.2vh;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  cursor: pointer;
}
.avatar-uploader {
  width: 99px;
  height: 99px;
  border-radius: 100%;
  box-sizing: border-box;
  text-align: center;
}
.d2 {
  margin-top: 50px;
  margin-left: 200px;
}
.elbtn {
  width: 20px;
  height: 20px;
  border: 0;
}
.medal {
  padding: 5px;
  font-size: 2.5vh;
  border-bottom: 5px solid rgb(248, 110, 110);
  box-shadow: 0 5px rgb(248, 160, 160);
}
.medal1 {
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: center;
  animation: slideInDown 1s;
}
.uploader {
  width: 200px;
  border: 1px solid #aaa;
  margin-right: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.uploader .uploader-icon {
  font-size: 30px;
  color: #8c939d;
  /* width: 200px; */
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.uploader .avatar {
  /* width: 200px; */
  height: 200px;
  display: block;
}
</style>
